<template>
  <el-dialog
    title="工时分摊-人员选择"
    :visible.sync="showColumn"
    v-dialogDrag
    :close-on-click-modal="false"
    width="400px"
    customClass="mes_dialog share_select">
    <div class="column_list" :style="{height: maxHeight}">
      <el-scrollbar>
        <el-checkbox-group v-model="checkedList" @change="checkedItemChange">
          <div v-for="item in shareList" :key="item.id">
            <el-checkbox :label="item" :disabled="item.disabled">{{item.name}}</el-checkbox>
          </div>
        </el-checkbox-group>
      </el-scrollbar>
    </div>
    <div slot="footer" class="col_footer">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        :disabled="disabledAll"
        @change="checkAllChange">全选</el-checkbox>
      <div class="mes_btn">
        <el-button type="primary" @click="saveCol">保存</el-button>
        <el-button @click="showColumn = false">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ShareSelect',
  data() {
    return {
      showColumn: false, // 显示分摊弹框
      shareList: [], // 分摊人员列表
      checkAll: false, // 是否全选
      isIndeterminate: false, // 是否已选择部分人员
      checkedList: [], // 选中人员列表
      disabledAll: false, // 是否禁用全选按钮
    }
  },
  computed: {
    // 分摊弹框最大高度
    maxHeight() {
      let height = this.shareList.length <= 10 ? this.shareList.length : 10
      return height * 30 + 'px'
    }
  },
  methods: {
    // 打开弹框
    openDialog(shareList, startWorkStaffId) {
      // 人员列表
      this.shareList = shareList.filter(item => item.id !== startWorkStaffId)
      // 过滤已分摊人员
      this.checkedList = this.shareList.filter(item => item.disabled)
      // 设置全选禁用及全选状态
      this.disabledAll = this.checkAll = this.shareList.length === this.checkedList.length
      // 判断是否部分选中
      this.isIndeterminate = this.checkedList.length > 0 && !this.checkAll
      // 显示弹框
      this.showColumn = true
    },
    // 全选回调
    checkAllChange(val) {
      // 赋值选中列表
      this.checkedList = val ? this.shareList : this.shareList.filter(item => item.disabled)
      // 判断是否有已分摊人员
      this.isIndeterminate = this.checkedList.length > 0 && !this.checkAll
    },
    // 单选回调
    checkedItemChange(val) {
      // 判断是否全部选中
      this.checkAll = val.length === this.shareList.length
      // 判断是否部分选中
      this.isIndeterminate = val.length > 0 && !this.checkAll
    },
    // 保存回调
    saveCol() {
      // 隐藏弹框
      this.showColumn = false
      // 保存回调
      this.$emit('saveShare', this.checkedList.filter(item => !item.disabled))
    }
  }
}
</script>

<style scoped lang="less">
  .col_footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .column_list{
    .el-scrollbar {
      height: 100%;
    }
    .el-checkbox{
      margin: 0px;
      font-size: 14px;
      color: #333;
      height: 30px;
      line-height: 30px;
    }
  }
</style>
<style lang="less">
  .share_select{
    .el-dialog__body{
      padding: 10px 20px;
      max-height: 300px;
    }
  }
</style>
